<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品详情</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/fvancl.css">
    <link rel="stylesheet" href="../css/details.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/details.js"></script>
    <script src="../js/cookie.js"></script>
    <script>
        $(function () {
            var user = cookie.get('user');
            if (user) {
                user = JSON.parse(user);
                user.forEach((elm, i) => {
                    var users = elm.username;
                    console.log(users);
                    $('.un').html(users);
                    $('.user').html('退出登录')
                    $('.name').html('切换用户');
                });
                $('.user').on('click', function () {
                    cookie.set('user', '', -1);
                });
            }
        });
    </script>
    <script>
        setTimeout(function () {
            var small = $('.img-box'),
                movebox = $('.fdj'),
                big = $('.big'),
                bigpic = $('.bigpic'),
                scale = $('.img-right');
            
            small.on('mouseover', function () {

                movebox.removeClass('hide').addClass('show');
                big.removeClass('hide').addClass('show');
                // 1. 比例计算 计算movebox大小 movebox:small = big:bigpic   movebox:big = small:bigpic
                movebox.css({
                    'width': (small.width()/1.2) * big.width() / bigpic.width() + 'px',
                    'height': (small.height()/1.2) * big.height() / bigpic.height() + 'px'
                });


                // 2. 鼠标跟随
                small.on('mousemove', function (ev) {
                    // 移动的距离计算
                    var left = ev.clientX - scale.offset().left - (movebox.width() / 2);
                    var top = ev.clientY - scale.offset().top - (movebox.height() / 2);
                    
                    // 大图移动比例计算
                    var ratio = bigpic.width() / small.width(); //比例必须大于1
                
                    // 3. 管理边界
                    if (left < 0) {
                        left = 0;
                    } else if (left > small.width() - movebox.width()) {
                        left = small.width() - movebox.width() - 2;
                       
                    }

                    if (top < 0) {
                        top = 0;
                    } else if (top > small.height() - movebox.height()) {
                        top = small.height() - movebox.height() - 2;
                       
                    }

                    // movebox跟随位置
                    movebox.css({
                        left: left + 'px',
                        top: top + 'px'
                    });
                    console.log(movebox.css('top'));

                    // 大图移动位置
                    bigpic.css({
                        left: -left * ratio + 'px',
                        top: -top * ratio + 'px'
                    });
                    console.log(bigpic.css('left'))
                });
            });

            small.on('mouseout', function () {
                movebox.removeClass('show').addClass('hide');
                big.removeClass('show').addClass('hide');
            });
        }, 500);
    </script>
</head>

<body>
    <!-- 头部 -->
    <header>
        <!-- 顶部导航 -->
        <div class="list-top">
            <!-- 版心 -->
            <div class="wrapper">
                <div class="right">
                    <div class="log-reg">
                        您好,<span>欢迎光临凡客诚品！ </span>
                        <span>
                            <a class="un" href="javascript:;"></a>
                            <a class="user" href="./login.html">
                                登录
                            </a>
                            |
                            <a class="name" href="./regist.html">
                                注册
                            </a>
                        </span>
                        <div class="order">
                            <a href="javascript:;">
                                我的订单
                            </a>
                        </div>
                        <div class="web">
                            <a href="javascript:;">网站公告</a>
                            <!-- 二维码。微博 -->
                            <a href="javascript:;" class="wx">
                                <span></span>
                                <b>

                                </b>
                            </a>
                            <a href="javascript:;" class="wb">
                                <span></span>
                            </a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- 搜索框大盒子 -->
        <div class="inp-box wrapper">
            <!-- 搜索框中盒子 -->
            <div class="inp-box-r">
                <div class="inp-t">
                    <!-- 搜索栏 -->
                    <div class="ipt">
                        <input type="text" value="搜“水柔棉”，体验与众不同"><input type="button" title="" value="搜索">
                    </div>
                    <!-- 购物车 -->
                    <div class="shopping">
                        <p>
                            <a href="../html/shopping.html">购物车(<span class="sum">0</span>)</a>
                        </p>
                    </div>
                </div>
                <!-- 热门搜索 -->
                <div class="inp-b">
                    <p>
                        热门搜索:
                        <a href="javascript:;">免烫衬衫</a>
                        <a href="javascript:;">羽绒服</a>
                        <a href="javascript:;">外套</a>
                        <a href="javascript:;">熊本熊</a>
                        <a href="javascript:;">户外运动</a>
                        <a href="javascript:;">帆布鞋</a>
                        <a href="javascript:;">水柔棉</a>
                    </p>
                </div>
            </div>

        </div>
        <!-- logo导航 -->
        <div class="logo-nav wrapper">
            <ul>
                <li class="logo">
                    <a href="javascript:;"></a>
                </li>
                <li>
                    <a href="javascript:;">首页</a>
                    <span></span>
                </li>
                <li class="bor">
                    <a href="javascript:;">衬衫</a>
                    <i></i>
                    <span></span>
                    <div class="two-nav">
                        <ul>
                            <li><a href="javascript:;">免烫</a></li>
                            <li><a href="javascript:;">易打理</a></li>
                            <li><a href="javascript:;">休闲</a></li>
                            <li><a href="javascript:;">高支</a></li>
                            <li><a href="javascript:;">法兰绒</a></li>
                            <li><a href="javascript:;">牛津纺</a></li>
                            <li><a href="javascript:;">牛仔</a></li>
                            <li><a href="javascript:;">棉麻</a></li>
                            <li><a href="javascript:;">水洗棉</a></li>
                            <li><a href="javascript:;">泡泡纱</a></li>
                            <li><a href="javascript:;">商务衬衫</a></li>
                        </ul>
                    </div>
                </li>
                <li class="bor">
                    <a href="javascript:;">T恤</a>
                    <i class="t-x"></i>
                    <span></span>
                    <div class="two-nav">
                        <ul>
                            <li><a href="javascript:;">本广</a></li>
                            <li><a href="javascript:;">李翔伟</a></li>
                            <li><a href="javascript:;">张广先</a></li>
                            <li><a href="javascript:;">药</a></li>
                            <li><a href="javascript:;">长场雄</a></li>
                            <li><a href="javascript:;">创可贴</a></li>
                            <li><a href="javascript:;">周南</a></li>
                            <li><a href="javascript:;">山鸟叔</a></li>
                            <li><a href="javascript:;">简鱼</a></li>
                            <li><a href="javascript:;">欧飞鸿</a></li>
                            <li><a href="javascript:;">好小猪</a></li>
                            <li><a href="javascript:;">剪纸猪</a></li>
                            <li><a href="javascript:;">赵老师的猪</a></li>
                            <li><a href="javascript:;">熊本熊</a></li>
                            <li><a href="javascript:;">水柔棉T</a></li>
                            <li><a href="javascript:;">运动T恤</a></li>
                            <li><a href="javascript:;">POLO</a></li>
                        </ul>
                    </div>
                </li>
                <li class="bor">
                    <a href="javascript:;">卫衣</a>
                    <span></span>
                    <div class="two-nav">
                        <ul>
                            <li><a href="javascript:;">熊本熊</a></li>
                            <li><a href="javascript:;">开衫</a></li>
                            <li><a href="javascript:;">连帽</a></li>
                            <li><a href="javascript:;">圆领</a></li>
                            <li><a href="javascript:;">水柔棉</a></li>>
                        </ul>
                    </div>
                </li>
                <li class="bor">
                    <a href="javascript:;">外套</a>
                    <span></span>
                    <div class="two-nav">
                        <ul>
                            <li><a href="javascript:;">运动户外</a></li>
                            <li><a href="javascript:;">皮肤衣</a></li>
                            <li><a href="javascript:;">西服</a></li>
                            <li><a href="javascript:;">C9设计款</a></li>
                            <li><a href="javascript:;">夹克</a></li>
                            <li><a href="javascript:;">nautilus</a></li>
                            <li><a href="javascript:;">大衣</a></li>
                            <li><a href="javascript:;">羽绒服</a></li>
                        </ul>
                    </div>
                </li>
                <li class="bor">
                    <a href="javascript:;">针织衫</a>
                    <span></span>
                    <div class="two-nav">
                        <ul>
                            <li><a href="javascript:;">空调衫</a></li>
                            <li><a href="javascript:;">棉线衫</a></li>
                            <li><a href="javascript:;">羊毛衫</a></li>
                        </ul>
                    </div>
                </li>
                <li class="bor">
                    <a href="javascript:;">裤装</a>
                    <span></span>
                    <div class="two-nav">
                        <ul>
                            <li><a href="javascript:;">针织裤</a></li>
                            <li><a href="javascript:;">休闲裤</a></li>
                            <li><a href="javascript:;">牛仔裤</a></li>
                            <li><a href="javascript:;">运动裤</a></li>
                            <li><a href="javascript:;">沙滩裤</a></li>
                        </ul>
                    </div>
                </li>
                <li class="bor">
                    <a href="javascript:;">鞋</a>
                    <span></span>
                    <div class="two-nav">
                        <ul>
                            <li><a href="javascript:;">复古跑鞋</a></li>
                            <li><a href="javascript:;">帆布鞋</a></li>
                            <li><a href="javascript:;">休闲鞋</a></li>
                            <li><a href="javascript:;">运动鞋</a></li>
                            <li><a href="javascript:;">皮鞋</a></li>
                            <li><a href="javascript:;">凉鞋</a></li>
                        </ul>
                    </div>
                </li>
                <li class="bor">
                    <a href="javascript:;">家居配饰</a>
                    <span></span>
                    <div class="two-nav">
                        <ul>
                            <li><a href="javascript:;">内衣袜品</a></li>
                            <li><a href="javascript:;">床品套件</a></li>
                            <li><a href="javascript:;">被子</a></li>
                            <li><a href="javascript:;">枕</a></li>
                            <li><a href="javascript:;">家居服</a></li>
                            <li><a href="javascript:;">家居鞋</a></li>
                            <li><a href="javascript:;">背提包</a></li>
                            <li><a href="javascript:;">拉杆箱</a></li>
                            <li><a href="javascript:;">皮带钱包</a></li>
                            <li><a href="javascript:;">手机壳</a></li>
                        </ul>
                    </div>
                </li>
                <li class="bor">
                    <a href="javascript:;">特惠</a>
                    <span></span>
                </li>
            </ul>
        </div>
    </header>
    <div class="main wrapper">
        <div class="title">

        </div>
        <div class="cen">
            <div class="cen-left">
                <div class="img-left">

                </div>
                <div class="img-right">

                </div>


                <!-- <script>
                    $(function () {

                        $('.img-box').on('mouseover', function () {
                            $('.fdj').removeClass('hide').addClass('show');
                            $('.big').removeClass('hide').addClass('show');
                        });
                        $('.img-box').on('mouseout', function () {
                            $('.fdj').removeClass('show').addClass('hide');
                            $('.big').removeClass('show').addClass('hide');
                        });
                    });
                </script> -->
                <script>
                    $(function () {
                        var shop = cookie.get('shop');
                        
                        var sum = 0;
                        if (shop) {
                            shop = JSON.parse(shop);
                            shop.forEach((elm, i) => {
                                sum += Number(elm.num);
                            });
                            
                            $('.sum').html(sum);
                        }
                    })

                </script>
            </div>
            <div class="cen-right">
                <div class="price">

                </div>
                <div class="img-color">
                    <p>颜色:</p>
                    <ul>
                        <li class="wh">

                        </li>
                    </ul>
                </div>
                <div class="size">
                    <p>尺码:</p>
                    <ul>
                        <li>XS</li>
                        <li>S</li>
                        <li>M</li>
                        <li>L</li>
                        <li>XL</li>
                        <li>XXL</li>
                    </ul>
                </div>
                <div class="num">
                    <p>数量:</p>
                    <select name="num" id="num">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                    </select>
                </div>
                <div class="xuanz">

                </div>
                <div class="shop">
                    <div class="new-shop">
                        <a href="">立即购买</a>
                    </div>
                    <div class="add-cart">
                        <a href="#" class="add">加入购物车</a>
                    </div>
                </div>
                <div class="yhui">
                    <h4>
                        <span>优惠提示</span>
                    </h4>
                    <div class="yun">
                        <span>免邮</span>
                        全场购物满199元免运费
                    </div>
                </div>
            </div>
        </div>
        <div class="part">
            <div class="p-title">
                <p>详情图片：</p>
                <p>注：商品实际颜色以静物图为准</p>
            </div>
            <div class="part-img">
                <img src="../img/6385225g.jpg" alt="">
            </div>
        </div>
    </div>
</body>

</html>